<template>
  <div id="Re">
    <div class="search">
      <el-button size="mini" @click="add()" type="success">挂号新增</el-button>
      <el-select v-model="sou.cha">
        <el-option label="医疗卡号" value="personNo"></el-option>
        <el-option label="医疗卡姓名" value="name"></el-option>
      </el-select>
      <el-input v-model="sou.zhi"></el-input>
      <el-button size="mini" type="success" @click="search()" style="margin-right:10px">查询</el-button>
      <el-button size="mini" type="success" @click="refresh()">重置</el-button>
    </div>
    <el-table :data="formData.data" style="width: 100%">
      <el-table-column align="center" label="门诊号" width="100px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="卡号">
        <template slot-scope="scope">
          <span>{{ scope.row.personNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="科室">
        <template slot-scope="scope">
          <span>{{ scope.row.subjectName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="挂号费">
        <template slot-scope="scope">
          <span>{{ scope.row.registerMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="挂号时间" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.treatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="挂号否">
        <template slot-scope="scope">
          <span>{{ scope.row.registerYn == 'Y' ? '已挂' : '未挂' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计价">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeData != null ? '已计价' : '未计价' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250px">
        <template slot-scope="scope">
          <el-button size="mini" @click="openXiu(scope.row)">修改</el-button>
          <el-button size="mini" @click="deleteDataTy(scope.row.id)">删除</el-button>
          <router-link :to="{ name: 'test', query: scope.row }">
            <el-button size="mini">开药</el-button>
          </router-link>
          <el-button size="mini" @click="copy(scope.row)" v-if="scope.row.registerYn == 'Y'">打印</el-button>
          <el-button size="mini" @click="copy(scope.row)" v-else disabled>打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :total="pages" :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <ADD @close="closeshow" @refresh="refresh" @change="changeF" :changeForm="changeForm" :theID="theID" :kind="kind" :dialogFormVisible="isshow"></ADD>
    <ll @close="closeshow" :changeForm="changeForm" :dialogFormVisible2="isshow2"></ll>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from 'vuex';
import ll from '@/components/guaCopy';
import ADD from '@/components/reAdd&xiu';
import mixins from '@/mixins/tishi';
import { time } from '@/utils/time';
export default {
  name: '',
  mixins: [mixins],
  data() {
    return {
      // {id:1,personsNo:'123'}
      formData: [],
      nowpage: 1,
      pageSize: 3,
      //搜索用
      sou: {
        cha: '',
        zhi: '',
      },
      //模态框用
      isshow: false, //模态框的显示和隐藏
      isshow2: false,
      kind: '',
      theID: '',
      changeForm: {},
    };
  },
  created() {
    this.getFormData(1);
  },
  methods: {
    ...mapActions(['tongyong']),
    timez(obj) {
      return time(obj);
    },
    refresh(o) {
      console.log(o);
      this.nowpage = 1;
      this.getFormData(1);
    },
    //获取表格数据
    getFormData(nowpage) {
      this['tongyong']({
        name: 'GET_REGISTRATION',
        data: {
          page: this.nowpage,
          pageSize: this.pageSize,
        },
      }).then(resp => {
        this.formData = resp.data;

        console.log(this.formData);
      });
    },
    //获取当前页
    handleCurrentChange(val) {
      this.nowpage = val;
      console.log(this.nowpage);
      this.getFormData(this.nowpage);
    },
    //搜索
    search() {
      this.nowpage = 1;
      let page = this.nowpage;
      let pageSize = this.pageSize;

      if (this.sou.cha == 'personNo') {
        let no = this.sou.zhi;
        this['tongyong']({
          name: 'CHA_REGISTRATION',
          data: {
            no,
            page,
            pageSize,
          },
        }).then(resp => {
          console.log(resp);
          this.formData = resp.data;
        });
      } else if (this.sou.cha == 'name') {
        let name = this.sou.zhi;
        this.$http({
          url: '/outpatient-service/zsdx-outpatient-service/menzhen/registration/select/selectByName/' + name,
          data: {},
          method: 'post',
          header: {
            'content-type': 'x-www-form-urlencoded',
          },
        }).then(resp => {
          console.log(resp);
          this.formData = resp.data;
          this.sou = {};
        });
      } else {
        this.$message('请选择查询方式');
      }
    },
    //修改
    openXiu(row) {
      this.isshow = true;
      this.kind = 'xiu';
      this.changeForm = { ...row };
      console.log(this.changeForm);
      this.changeForm.registerYn = this.changeForm.registerYn == 'Y' ? true : false;
      console.log(this.changeForm);
      console.log(row);
    },
    //模态框隐藏
    closeshow(method) {
      this.isshow = method;
      this.isshow2 = method;
      this.changeForm = {};
    },
    //模态框添加
    add() {
      this.isshow = true;
      this.kind = 'add';
      this.changeForm = { personNo: '', subjectName: '', registerMoney: '', treatDate: '', registerYn: false, identityStatus: '' };
    },
    //删除
    deleteDataTy(id) {
      return this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          console.log(id);
          this.$http({
            url: '/outpatient-service/zsdx-outpatient-service/menzhen/registration/delete/deleteById/' + id,
            data: {},
            method: 'post',
            // header:{
            //   'content-type':'x-www-form-urlencoded'
            // }
          }).then(data => {
            console.log(data);
            this.$message({
              type: 'info',
              message: '删除成功',
            });
            this.getFormData(this.nowpage);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    //打印
    copy(row) {
      this.changeForm = row;
      this.isshow2 = true;
    },
    changeF(data) {
      this.changeForm = data;
      return this.changeForm;
    },
  },
  computed: {
    pages() {
      if (this.sou.cha == 'name') {
        let length = this.formData.data.length;
        return length;
      } else {
        return this.formData.count;
      }
    },
  },
  components: {
    ADD,
    ll,
  },
};
</script>
<style lang="less" scoped>
.search {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  .el-input {
    width: 200px;
  }
}
.el-button + .el-button {
  margin: 0;
}
</style>
